<template>
  <view class="personal">
    <!-- bar -->
    <view class="personal__header">
      <view class="personal__title">我的</view>
      <view class="flex align-center mt-20" @click="handleUserInfo">
        <u-avatar
          :size="120"
          :src="avatar"
          bg-color="#FFFFFF"
          class="mr-20"
          shape="circle"
        >
        </u-avatar>
        <view
          class="personal__user--box flex align-center justify-between flex-1"
        >
          <view>
            <text class="personal__user--name">{{ agentInfo.phone }}</text>
            <text class="personal__user--job">{{ agentInfo.nickname }}</text>
          </view>
          <u-icon name="arrow-right" size="40"></u-icon>
        </view>
      </view>
      <view class="personal__box">
        <view class="flex align-center personal__money--box">
          <image
            src="../../../static/image/personal/img_my_icon_1.png"
            mode=""
            class="personal__tip-icon"
          >
          </image>
          <view class="flex align-center justify-between flex-1">
            <view>
              <view class="">{{ userInfo.totalIncome }}</view>
              <view class="">历史累计收益(元)</view>
            </view>
          </view>
        </view>
        <view class="flex align-center personal__withdraw--box">
          <image
            src="../../../static/image/personal/img_my_icon_2.png"
            mode=""
            class="personal__tip-icon"
          >
          </image>
          <view class="flex align-center justify-between flex-1">
            <view>
              <view class="">{{ userInfo.withdrawalAmount }}</view>
              <view class="">历史累计提现金额(元)</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- content内容 -->
    <u-cell-group class="mt-20 group">
      <u-cell-item
        @click="goAccountBalance()"
        :title-style="{ color: '#333333' }"
        title="我的钱包"
      >
        <image
          :title-style="{ color: '#333333' }"
          class="icon mr-20"
          slot="icon"
          src="@/static/image/personal/icon_my_0.png"
        />
      </u-cell-item>
      <u-cell-item
        @click="goBenefit()"
        :title-style="{ color: '#333333' }"
        title="我的业绩"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/personal/icon_my_1.png"
        />
      </u-cell-item>
      <u-cell-item
        :title-style="{ color: '#333333' }"
        title="结算信息"
        @click="goSettlement()"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/personal/icon_my_2.png"
        />
      </u-cell-item>
      <u-cell-item
        @click="goAbout()"
        :title-style="{ color: '#333333' }"
        title="关于我们"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/personal/icon_my_3.png"
        />
      </u-cell-item>
      <u-cell-item
        :title-style="{ color: '#333333' }"
        title="设置"
        @click="handleSetting"
      >
        <image
          class="icon mr-20"
          slot="icon"
          src="@/static/image/personal/icon_my_4.png"
        />
      </u-cell-item>
    </u-cell-group>
    <!-- 电话 -->
    <view class="personal_footer">
      <view class="personal_son1">客服电话：400-875-8887</view>
      <view class="personal_son2">工作时间：09:00~18:00</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agentInfo: {},
      userInfo: {},
    };
  },
  created() {},
  onShow() {
    this.getUserInfo();
    this.agentInfo = uni.getStorageSync('user_info');
    // console.log('this.agentInfo------->' + JSON.stringify(this.agentInfo));
  },
  computed: {
    avatar() {
      if (this.agentInfo && !this.agentInfo.avatar) {
        return '../../../static/logo.jpg';
      }
      if (
        this.agentInfo &&
        this.agentInfo.avatar &&
        this.agentInfov.avatar.indexOf('http') !== -1
      ) {
        return this.agentInfo.avatar;
      }

      if (this.agentInfo && this.agentInfo.avatar) {
        return uni.$zx.downloadBaseUrl + this.agentInfo.avatar;
      }
    },
  },
  onTabItemTap({ index, pagePath, text }) {
    // 点击tabs进来
    uni.removeStorageSync('newsCompass');
    uni.removeStorageSync('order_deliver');
  },
  methods: {
    getUserInfo() {
      this.$zx.user_api.accountStatistics().then((data) => {
        this.userInfo = data;
      });
    },
    handleInvite() {
      uni.navigateTo({
        url: '/pages/main/invite/invite',
      });
    },
    handleSetting() {
      uni.navigateTo({
        url: '/pages/main/setting/setting',
      });
    },
    handleFeedback() {
      uni.navigateTo({
        url: '/pages/main/feedback/feedback',
      });
    },
    handleEmail() {
      uni.navigateTo({
        url: '/pages/main/ceo-email/ceo-email',
      });
    },
    handleUserInfo() {
      uni.navigateTo({
        url: '/pages/main/user-info/user-info',
      });
    },
    goAccountBalance() {
      uni.navigateTo({
        url: '/pages/mine/balance/accountBalance',
      });
    },
    handleMessage() {
      uni.navigateTo({
        url: '/pages/mine/balance/accountBalance',
      });
    },
    goBenefit() {
      uni.switchTab({
        url: '/pages/benefit/benefit-home',
      });
    },
    goSettlement() {
      uni.navigateTo({
        url: '/pages/mine/settlement/settlementInfo',
      });
    },
    goAbout() {
      uni.navigateTo({
        url: '/pages/mine/about',
      });
    },
  },
};
</script>
<style scoped lang="scss">
.personal {
  &__title {
    line-height: 80rpx;
    height: 80rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  &__header {
    width: 750rpx;
    // height: 346rpx;
    position: relative;
    padding: 0rpx 20rpx 20rpx 20rpx;
    // 计算状态栏的高度
    padding-top: var(--status-bar-height);
    // padding-top: 50rpx;
    background-color: white;
  }

  &__background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
  }

  &__user--box {
    position: relative;
    // color: #ffffff;
    z-index: 1;
  }

  &__user--name {
    font-size: 36rpx;
    line-height: 62rpx;
    font-weight: bold;
    display: block;
  }

  &__user--job {
    font-size: 28rpx;
    line-height: 48rpx;
    font-weight: 400;
    display: block;
    // margin-top: 10rpx;
  }

  &__box {
    display: flex;
    justify-content: space-around;
    padding: 10rpx;
    font-size: 11px;
    color: white;
  }

  &__money--box {
    background-repeat: no-repeat;
    // height: 167rpx;
    height: 132rpx;
    background-size: 100% 100%;
    background-image: url('/static/image/personal/img_my_bg_1.png');
    margin-right: 10rpx;
    padding-left: 20rpx;
    flex: 1;
  }

  &__withdraw--box {
    background-repeat: no-repeat;
    // height: 167rpx;
    height: 132rpx;
    background-size: 100% 100%;
    background-image: url('/static/image/personal/img_my_bg_2.png');
    margin-left: 10rpx;
    padding-left: 20rpx;
    flex: 1;
  }

  &__tip-icon {
    width: 70rpx;
    height: 70rpx;
    margin-right: 10rpx;
  }
}

.icon {
  width: 40rpx;
  height: 40rpx;
}

.group {
  background-color: white;
}
// 电话
.personal_footer {
  font-weight: bold;
  position: absolute;
  bottom: 50px;
  font-size: 32rpx;
  width: 100%;
  color: red;
  text-align: center;
  .personal_son2 {
    padding-top: 20rpx;
  }
}
</style>
